<!--  -->
<template>
    <div class="app-container" id="region">
        <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="name"
      label="区域名称">
    </el-table-column>
    <el-table-column
      prop="type"
      label="区域类型">
      <template slot-scope="scope">
        <!-- {{scope.row.type | typeFilter}} -->
        {{typeMap2[scope.row.type-1]}}
      </template>
    </el-table-column>
    <el-table-column
      prop="code"
      label="区域编码">
    </el-table-column>
  </el-table>
      
    </div>
  </template>
  <script >
 import { listRegion } from '@/api/malls/region';
  export default {
    name: 'Region',
    components: {},
    //vue中的过滤器
    // 作用：对数据进行筛选、过滤、格式化
    //常用于时间格式化、英文大小转换、状态转换
    //格式：值 | js处理函数
    filters:{
        typeFilter(status){
            const typeMap={
                '1':'省',
                '2':'市',
                '3':'区'
            }
            return typeMap[status]
        }
    },
    data() {
      return {
        tableData:[],
        typeMap2:["省","市","区"]
      }
    },
    props: [],
   
    created() {
      // 数据初始化
     this.getList();
    },
    mounted() {
    },
    methods: {
        getList(){
            listRegion().then(res=>{
                console.log(res)
                this.tableData=res.data.data.list;
            })
        }
    }
  };
  </script>
  <style>
  
  </style>
  <style scoped>
  </style>